<!-- src/components/DynamicMenuItem.vue -->

<template>
    <div>
        <!-- 如果是菜单项 -->
        <el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
        </el-menu-item>

        <!-- 如果是子菜单 -->
        <el-submenu v-else :index="item.path">
            <template #title>
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>

            <!-- 递归渲染自身 -->
            <dynamic-menu-item
                    v-for="subItem in item.children"
                    :key="subItem.id"
                    :item="subItem"
            />
        </el-submenu>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
    name: 'DynamicMenuItem',
    props: {
        item: {
            type: Object as PropType<{ id: number, title: string, icon: string, path: string, children?: Array<any> }>,
            required: true
        }
    }
})
</script>
